'use strict';
import React from 'react';
import fetch from 'fetch'
import { View, Text, Navigator,StyleSheet,Image,Alert,ActivityIndicator} from 'react-native';
import {WhiteSpace, Button,SearchBar,WingBlank } from 'antd-mobile';
import { TabNavigator } from "react-navigation";

class RecentChatsScreen extends React.Component {
    render() {
        const { navigate } = this.props.navigation;
        return(
            <View>
                <WhiteSpace/>
                <Button
                    onClick={() => navigate('ProfileScreen', { user: 'ProfileScreen' })}
                >"go to ProfileScreen"</Button>
            </View>
        )
    }
}

class AllContactsScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchString: 'london',
            isLoading: false,
            message: ''
        };
    }

    onSearchSubmit(event) {

    /*    Alert.alert(
            'Alert Title',
            event,
        )*/
        this.setState({ searchString: event });
        //this.setState({ searchString: event ,isLoading: true});

        /*  fetch(query)
              .then(response => response.json())
              .then(json =>  this.setState({ isLoading: false , message: json.response }))
              .catch(error =>
                  this.setState({
                      isLoading: false,
                      message: 'Something bad happened ' + error
                  }));*/


    }
    render() {
        const { navigate } = this.props.navigation;
        let spinner = this.state.isLoading ?
            ( <ActivityIndicator
                hidden='true'
                size='large'/> ) :
            ( <View/>);
        return (
            <View>
                <View >
                    <Text style={{color : "#20a3ff",fontSize:20}}><Text style={{color : "#f00"}}>您输入的是：</Text>{this.state.searchString}</Text>
                    <SearchBar placeholder="搜索" maxLength={8} onChange={e=>this.onSearchSubmit(e)} onSubmit={() =>navigate('SearchResult', { user: 'SearchResult' })}/>
                        <WingBlank size="lg">
                            <View style={{
                                backgroundColor: '#fff',
                                alignItems: 'center',
                                justifyContent: 'center'}}><Image source={require('../images/search.jpg')}/></View>
                        </WingBlank>
                    {spinner}
                </View>
            </View>
        )
    }
}

const SearchPage = TabNavigator({
    Recent: { screen: RecentChatsScreen },
    All: { screen: AllContactsScreen },
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        width: 217,
        height: 138
    },
});
module.exports = SearchPage;